<template>
  <div class="app-container">
    <el-card>
      <el-form :model="queryParams" ref="queryRef" :inline="false" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="出库状态" prop="orderStatus">
              <el-radio-group v-model="queryParams.orderStatus" @change="handleQuery">
                <el-radio-button  label="all">
                  全部
                </el-radio-button>
                <el-radio-button v-for="item in wms_outbound_status" :key="item.value" :label="item.value">
                  {{ item.label }}
                </el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="出库类型" prop="optType">
              <el-radio-group v-model="queryParams.optType" @change="handleQuery">
                <el-radio-button :key="-1" :label="-1">
                  全部
                </el-radio-button>
                <el-radio-button v-for="item in wms_receipt_type" :key="item.value" :label="item.value">
                  {{ item.label }}
                </el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="出库单号" prop="billsId">
              <el-input v-model="queryParams.billsId" placeholder="请输入出库单号" clearable @keyup.enter="handleQuery" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="往来单位" prop="billsCd">
              <el-input v-model="queryParams.billsCd" placeholder="请输入往来单位名称" clearable @keyup.enter="handleQuery" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="制单时间">
              <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="handleDateChange" style="width: 100%">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card class="mt20">
      <!-- 操作说明提示 -->
      <el-alert title="业务流程说明" type="info" :closable="false" class="mb10">
        <template #default>
          <div style="font-size: 13px; line-height: 22px;">
            <p>📋 <strong>完整流程：</strong>创建出库单 → 拣货任务 → 出库复核 → 出库确认 → 完成出库</p>
            <p>🔄 <strong>状态流转：</strong>
              <el-tag size="mini" type="info">待拣货</el-tag> →
              <el-tag size="mini" type="warning">已拣货待复核</el-tag> →
              <el-tag size="mini" type="primary">已复核待出库</el-tag> →
              <el-tag size="mini" type="success">已出库</el-tag>
            </p>
            <p>⚠️ <strong>异常处理：</strong>拣货或复核异常时，状态回滚至<el-tag size="mini" type="danger">异常</el-tag>状态</p>
          </div>
        </template>
      </el-alert>
    </el-card>

    <el-card class="mt20">
      <el-row :gutter="10" class="mb8" type="flex" justify="space-between">
        <el-col :span="6"><span style="font-size: large">出库单据</span></el-col>
        <el-col :span="1.5">
          <el-button type="primary" @click="handleAdd">新增出库单</el-button>
        </el-col>
      </el-row>

      <el-table :data="headerList" border class="mt20" height="calc(100vh - 450px)" style="width: 100%">
        <!-- 单据明细 -->
        <el-table-column type="expand" width="40">
          <template #default="{ row }">
            <div style="padding: 0 50px 20px 50px">
              <el-row :gutter="10" class="mb8" type="flex" justify="space-between">
                <el-col :span="6"><span style="font-size: large">单据明细</span></el-col>
              </el-row>
              <el-table :data="row.outDetailList || []" border>
                <el-table-column show-overflow-tooltip type="index" label="行号" align="center" min-width="60"></el-table-column>
                <el-table-column show-overflow-tooltip prop="drugId" label="药品编码" align="center" min-width="120"/>
                <el-table-column show-overflow-tooltip prop="drugName" label="药品名称" align="center" min-width="200"/>
                <el-table-column show-overflow-tooltip prop="drugCd" label="生产厂家" align="center" min-width="150"/>
                <el-table-column show-overflow-tooltip prop="drugPzwh" label="批准文号" align="center" min-width="150"/>
                <el-table-column show-overflow-tooltip prop="drugBatchNo" label="批号" align="center" min-width="120"/>
                <el-table-column show-overflow-tooltip prop="drugGg" label="规格" align="center" min-width="150"/>
                <el-table-column show-overflow-tooltip prop="drugDw" label="单位" align="center" min-width="80"/>
                <el-table-column show-overflow-tooltip prop="drugNum" label="数量" align="center" min-width="80"/>
                <el-table-column show-overflow-tooltip prop="drugCheckNum" label="确认数量" align="center" min-width="100"/>
                <el-table-column show-overflow-tooltip prop="locationCode" label="货位号" align="center" min-width="120"/>
                <el-table-column show-overflow-tooltip prop="drugPd" label="生产日期" align="center" min-width="120"/>
                <el-table-column show-overflow-tooltip prop="drugExp" label="有效期" align="center" min-width="120"/>
              </el-table>
            </div>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="billsId" label="单据号" align="center" width="180"></el-table-column>
        <el-table-column show-overflow-tooltip prop="billsTypeName" label="单据类型" align="center" width="120"></el-table-column>
        <el-table-column show-overflow-tooltip prop="billsCdName" label="往来单位" align="center" min-width="200"></el-table-column>
        <el-table-column show-overflow-tooltip prop="totalPackages" label="总件数" align="center" width="100"></el-table-column>
        <el-table-column show-overflow-tooltip prop="totalQuantity" label="总数量" align="center" width="100"></el-table-column>
        <el-table-column show-overflow-tooltip label="出库状态" align="center" width="120">
          <template #default="scope">
            <el-tag v-if="scope.row.stockStatus === '0'" type="info">待拣货</el-tag>
            <el-tag v-else-if="scope.row.stockStatus === '1'" type="warning">已拣货待复核</el-tag>
            <el-tag v-else-if="scope.row.stockStatus === '2'" type="primary">已复核待出库</el-tag>
            <el-tag v-else-if="scope.row.stockStatus === '3'" type="success">已出库</el-tag>
            <el-tag v-else-if="scope.row.stockStatus === '9'" type="danger">异常</el-tag>
            <el-tag v-else>未知状态</el-tag>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="creatorName" label="制单人" align="center" width="100"></el-table-column>
        <el-table-column show-overflow-tooltip prop="createTime" label="制单时间" align="center" width="160"></el-table-column>
        <el-table-column label="操作" align="center" width="260" fixed="right">
          <template #default="scope">
            <el-button v-if="scope.row.stockStatus === '0' || scope.row.stockStatus === '9'" type="primary" size="small" @click="getTask(scope.row)">生成拣货</el-button>
            <el-button v-if="scope.row.stockStatus === '0' || scope.row.stockStatus === '9'" type="primary" size="small" @click="handleEdit(scope.row)">修改</el-button>
            <el-button v-if="scope.row.stockStatus === '0' || scope.row.stockStatus === '9'" type="danger" size="small" @click="handleDeleteBills(scope.row)">删除</el-button>
            <el-button v-if="scope.row.stockStatus !== '0' && scope.row.stockStatus !== '9'" type="info" size="small" @click="handleViewDetail(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="float: right; margin: 20px">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
                       :page-sizes="[10, 50, 100]" :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>
<script>
import {
  finishStoreList,
  finishStoreDetail,
  finishStoreListDelete
} from '@/api/storage/finishStore'

export default {
  name: 'FinishStoreIndex',
  data() {
    return {
      total: 0,
      pageSize: 10,
      pageNum: 1,
      queryParams: {
        billsId: '',
        billsCd: '',
        orderStatus: 'all',
        optType: -1,
        startTime: null,
        endTime: null
      },
      dateRange: null,
      wms_outbound_status: [
        { label: '待拣货', value: '0' },
        { label: '异常', value: '9' }
      ],
      wms_receipt_type: [
        { label: '销售出库', value: 'SalesWareHouseOut'},
        { label: '退货出库', value: 'ReturnWareHouseOut'},
        { label: '调拨出库', value: 'AllocateWareHouseOut'},
        { label: '返工出库', value: 'ReworkWareHouseOut'},
        { label: '销毁出库', value: 'DestoryWareHouseOut'},
        { label: '抽检出库', value: 'InspectionWareHouseOut'},
        { label: '直调出库', value: 'DirectWareHouseOut'},
        { label: '赠品出库', value: 'GiftWareHouseOut'},
        { label: '其他出库', value: 'OtherWareHouseOut'},
        { label: '使用出库', value: 'RetailWareHouseOut'}
      ],
      headerList: []
    }
  },
  created() {
    this.handleQuery()
  },
  methods: {
    //生成拣货任务
    getTask(row){
      this.$confirm('确定要对该单号创建拣货任务吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

      }).catch(() => {
        this.$message.info('任务取消')
      })
    },
    // 查询
    handleQuery() {
      const params = {
        ...this.queryParams,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        type:'0',
      }
      finishStoreList(params).then(res => {
        this.headerList = res.rows || []
        this.total = res.total || 0
      }).catch(err => {
        this.$message.error('查询失败：' + err.message)
      })
    },

    // 重置
    resetQuery() {
      this.queryParams = {
        billsId: '',
        billsCd: '',
        orderStatus:'all',
        optType: -1,
        startTime: null,
        endTime: null
      }
      this.dateRange = null
      this.pageNum = 1
      this.handleQuery()
    },

    // 日期范围变化
    handleDateChange(value) {
      if (value && value.length === 2) {
        this.queryParams.startTime = value[0]
        this.queryParams.endTime = value[1]
      } else {
        this.queryParams.startTime = null
        this.queryParams.endTime = null
      }
    },

    // 新增
    handleAdd() {
      this.$router.push({
        path: '/storage/finishStore/qmsDocument'
      })
    },

    // 编辑
    handleEdit(row) {
      this.$router.push({
        path: '/storage/finishStore/qmsDocument',
        query: {
          billsId: row.billsId
        }
      })
    },

    // 查看详情
    handleViewDetail(row) {
      this.$router.push({
        path: '/storage/finishStore/qmsDocument',
        query: {
          billsId: row.billsId,
          viewOnly: true
        }
      })
    },

    // 删除单据
    handleDeleteBills(row) {
      this.$confirm('确定要删除该出库单据吗？删除后无法恢复！', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        finishStoreListDelete(row.billsId).then(res => {
          this.$message.success(res.msg || '删除成功')
          this.handleQuery()
        }).catch(err => {
          this.$message.error('删除失败：' + err.message)
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },

    // 页大小变化
    handleSizeChange(newPageSize) {
      this.pageSize = newPageSize
      this.pageNum = 1
      this.handleQuery()
    },

    // 当前页变化
    handleCurrentChange(newPage) {
      this.pageNum = newPage
      this.handleQuery()
    }
  }
}
</script>

<style scoped>
.mt20 {
  margin-top: 20px;
}

.mb8 {
  margin-bottom: 8px;
}

.mb10 {
  margin-bottom: 10px;
}
</style>
